<template>
	<view>
		<formList :formList="formList" :formData="formData"></formList>
		<view class="formList">
		<!-- 	<u--form labelPosition="left" labelWidth="100px" :model="model" :rules="rules" ref="form">
				<u-form-item label="单号" prop="production.no" borderBottom>
					<u-input v-model="model.production.no" type="input" placeholder="请选择单号" border="none" clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchNo"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item :label="$t('public.cutNo')+$t('public.colon')" prop="production.cutNo" borderBottom>
					<u-input v-model="model.production.cutNo" type="input" placeholder="请选择裁剪单号" border="none"
						clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchCutNo"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="汇报人" prop="production.name" borderBottom>
					<u-input v-model="model.production.name" type="input" placeholder="请选择汇报人" border="none" clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchName"></u-icon>
						</template>
					</u-input>
					</u-action-sheet>
				</u-form-item>
				<u-form-item label="颜色" prop="production.color" borderBottom>
					<u-input v-model="model.production.color" type="input" placeholder="请选择颜色" border="none" clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchColor"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="尺码" prop="production.size" borderBottom>
					<u-input v-model="model.production.size" type="input" placeholder="请选择尺码" border="none" clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchSize"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item label="部件" prop="production.part">
					<u-input v-model="model.production.part" type="input" placeholder="请选择部件" border="none" clearable>
						<template slot="suffix">
							<u-icon name="arrow-right" @click="searchPart"></u-icon>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
			<u-picker :show="noSelect" :columns="noList" @cancel="noCancel" @confirm="noConfirm">
			</u-picker>
			<u-picker :show="cutNoSelect" :columns="cutNoList" @cancel="cutNoCancel" @confirm="cutNoConfirm">
			</u-picker>
			<u-picker :show="nameSelect" :columns="nameList" keyName="name" @cancel="nameCancel" @confirm="nameConfirm">
			</u-picker>
			<u-picker :show="colorSelect" :columns="colorList" @cancel="colorCancel" @confirm="colorConfirm">
			</u-picker>
			<u-picker :show="sizeSelect" :columns="sizeList" @cancel="sizeCancel" @confirm="sizeConfirm">
			</u-picker>
			<u-picker :show="partSelect" :columns="partList" @cancel="partCancel" @confirm="partConfirm">
			</u-picker> -->
		</view>
		<!-- 底部按钮 -->
		<bottomBtn :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submitBtn" @leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>

<script>
	import {
		getProductionNos,
		getProductionTaskByNo,
		colorSizeQueryListByField,
		procedureQueryListByField,
		getUsersByCurrent,
		queryUncompletedReport
	} from "@/api/homepage.js"
	import formList from '@/components/zy-form/index.vue';
	import bottomBtn from "@/components/bottomBtn/index.vue"
	export default {
		components: {
			formList,
			bottomBtn,
		},
		data() {
			return {
				//表单字段
				formData: {
					no: '',
					cutNo: '',
					productionTaskId: '',
					cuttingSheetId: '',
					name: '',
					id: '',
					color: '',
					size: '',
					part: ''
				},
				//表单label
				formList: [{
						label: '单号',
						key: 'no'
					},
					{
						label: '裁剪单号',
						key: 'cutNo'
					},
					{
						label: '汇报人',
						key: 'name'
					},
					{
						label: '颜色',
						key: 'color'
					},
					{
						label: '尺码',
						key: 'size'
					},
					{
						label: '部件',
						key: 'part'
					}
				],
				model: {
					production: {
						no: '',
						cutNo: '',
						productionTaskId: '',
						cuttingSheetId: '',
						name: '',
						id: '',
						color: '',
						size: '',
						part: ''
					},
				},
				rules: {
					'production.no': [{
						required: true,
						message: '单号不能为空',
						trigger: ['change', 'blur'],
					}],
					'production.cutNo': [{
						required: true,
						message: '裁剪单号不能为空',
						trigger: ['change', 'blur'],
					}],
					'production.name': [{
						required: true,
						message: '汇报人不能为空',
						trigger: ['change', 'blur'],
					}],
				},
				noList: [],
				noSelect: false,
				cutNoList: [],
				cutNoSelect: false,
				cutList: [],
				colorList: [],
				colorSelect: false,
				sizeList: [],
				sizeSelect: false,
				partList: [],
				partSelect: false,
				nameList: [],
				nameIdList: [],
				nameSelect: false,
				tableList: []
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/WorkReport/index"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.model.production.name = this.$store.state.loginData.realname
			this.model.production.id = this.$store.state.loginData.id
		},
		methods: {
			// 单号
			noCancel() {
				this.noSelect = false
			},
			noConfirm(e) {
				this.noSelect = false
				var no = e.value
				this.formData.no = no.toString()
			},
			searchNo() {
				this.noSelect = true
				getProductionNos().then((res) => {
					if (this.formData.no === '') {
						var noLists = []
						noLists.push(res.data)
						this.noList = noLists
					} else {
						this.noList = []
						//模糊搜索
						var noFilterList = []
						noFilterList = res.data.filter((item) => {
							return item.indexOf(this.model.production.no) >= 0
						})
						this.noList.push(noFilterList)
					}
				})
			},
			// 裁剪单号
			cutNoCancel() {
				this.cutNoSelect = false
			},
			cutNoConfirm(e) {
				this.cutNoSelect = false
				var cutNo = e.value
				this.formData.cutNo = cutNo.toString()
				this.formData.cuttingSheetId = this.cutList[e.indexs].cutId
			},
			searchCutNo() {
				this.cutNoList = []
				this.cutNoSelect = true
				getProductionTaskByNo({
					productionNo: this.formData.no
				}).then((res) => {
					this.formData.productionTaskId = res.data.id
					var str = [];
					this.cutList = []
					for (var i = 0; i < res.data.cuttingSheetList.length; i++) {
						str.push(res.data.cuttingSheetList[i].cuttingSheetNo)
						let obj = {}
						obj.cutNo = res.data.cuttingSheetList[i].cuttingSheetNo
						obj.cutId = res.data.cuttingSheetList[i].id
						this.cutList.push(obj)
					}
					if (this.formData.cutNo === '') {
						let obj = []
						obj = str
						this.cutNoList.push(obj)
					} else {
						//模糊搜索
						var obj = []
						obj = str.filter((item) => {
							return item.indexOf(this.model.production.cutNo) >= 0
						})
						this.cutNoList.push(obj)
					}
				})
			},
			// 汇报人
			nameCancel() {
				this.nameSelect = false
			},
			nameConfirm(e) {
				this.nameSelect = false
				var name = e.value[0].name
				this.model.production.name = name
				var id = e.value[0].id
				this.model.production.id = id
			},
			searchName() {
				this.nameList = []
				this.nameIdList = []
				this.nameSelect = true
				getUsersByCurrent().then((res) => {
					var str = [];
					var nameStr = []
					for (var i = 0; i < res.data.length; i++) {
						nameStr.push(res.data[i].realname)
						let arr = {
							name: res.data[i].realname,
							id: res.data[i].id
						}
						str.push(arr)
					}
					if (this.model.production.name === '') {
						let obj = []
						obj = str
						this.nameList.push(obj)
					} else {
						//模糊搜索
						var obj = []
						obj = nameStr.filter((item) => {
							return item.indexOf(this.model.production.name) >= 0
						})
						for (var i = 0; i < obj.length; i++) {
							for (var j = 0; j < str.length; j++) {
								if (obj[i] == str[j].name) {
									let nameArr = {
										name: str[j].name,
										id: str[j].id
									}
									this.nameIdList.push(nameArr)
								}
							}
						}
						this.nameList.push(this.nameIdList)
					}
				})
			},
			// 颜色
			colorCancel() {
				this.colorSelect = false
			},
			colorConfirm(e) {
				this.colorSelect = false
				var color = e.value
				this.model.production.color = color.toString()
			},
			searchColor() {
				this.$refs.form.validate().then(res => {
					this.colorList = []
					this.colorSelect = true
					colorSizeQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.model.production.cuttingSheetId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].color) == -1) {
								str.push(res.data[i].color)
							}
						}
						if (this.model.production.color === '') {
							let obj = []
							obj = str
							this.colorList.push(obj)
						} else {
							//模糊搜索
							var obj = []
							obj = str.filter((item) => {
								return item.indexOf(this.model.production.color) >= 0
							})
							this.colorList.push(obj)
						}
					})
				})
			},
			// 尺码
			sizeCancel() {
				this.sizeSelect = false
			},
			sizeConfirm(e) {
				this.sizeSelect = false
				var size = e.value
				this.model.production.size = size.toString()
			},
			searchSize() {
				this.$refs.form.validate().then(res => {
					this.sizeList = []
					this.sizeSelect = true
					colorSizeQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.model.production.cuttingSheetId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].size) == -1) {
								str.push(res.data[i].size)
							}
						}
						if (this.model.production.size === '') {
							let obj = []
							obj = str
							this.sizeList.push(obj)
						} else {
							//模糊搜索
							var obj = []
							obj = str.filter((item) => {
								return item.indexOf(this.model.production.size) >= 0
							})
							this.sizeList.push(obj)
						}
					})
				})
			},
			// 部件
			partCancel() {
				this.partSelect = false
			},
			partConfirm(e) {
				this.partSelect = false
				var part = e.value
				this.model.production.part = part.toString()
			},
			searchPart() {
				this.$refs.form.validate().then(res => {
					this.partList = []
					this.partSelect = true
					procedureQueryListByField({
						fieldName: 'cuttingSheetId',
						fieldValue: this.model.production.cuttingSheetId
					}).then((res) => {
						var str = [];
						for (var i = 0; i < res.data.length; i++) {
							if (str.indexOf(res.data[i].partName) == -1) {
								str.push(res.data[i].partName)
							}
						}
						if (this.model.production.part === '') {
							let obj = []
							obj = str
							this.partList.push(obj)
						} else {
							//模糊搜索
							var obj = []
							obj = str.filter((item) => {
								return item.indexOf(this.model.production.part) >= 0
							})
							this.partList.push(obj)
						}
					})
				})
			},
			submitBtn() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					queryUncompletedReport({
						cuttingSheetNo: this.model.production.cuttingSheetId,
						color: this.model.production.color,
						sizeName: this.model.production.size,
						partName: this.model.production.part
					}).then((res) => {
						if (res.code == 0) {
							this.tableList = []
							for (var i = 0; i < res.data.length; i++) {
								let tableList = {
									bindingNo: res.data[i].bindingNo,
									cardId: res.data[i].cardId,
									color: res.data[i].color,
									cuttingSheetNo: res.data[i].cuttingSheetNo,
									num: res.data[i].num,
									partName: res.data[i].partName,
									perBindNum: res.data[i].perBindNum,
									procedureId: res.data[i].procedureId,
									procedureName: res.data[i].procedureName,
									procedureNo: res.data[i].procedureNo,
									productionNo: res.data[i].productionNo,
									size: res.data[i].size,
									styleCode: res.data[i].styleCode,
									styleName: res.data[i].styleName,
									id: String(i + 1)
								}
								this.tableList.push(tableList)
							}
							this.$store.commit('workReportList', this.tableList)
							uni.navigateTo({
								url: '/pages/HomePage/WorkReport/tableList?name=' + this.model
									.production.name + '&id=' + this.model.production.id +
									'&productionTaskId=' + this.model.production.productionTaskId +
									'&cuttingSheetId=' + this.model.production.cuttingSheetId
							})
						} else {
							uni.$u.toast(res.message)
						}
					})
				}).catch(errors => {})
			},
			resetBtn() {
				const validateList = ['production.no', 'production.cutNo', 'production.color', 'production.size',
					'production.part', 'production.name'
				]
				this.$refs.form.resetFields()
				this.$refs.form.clearValidate()
				setTimeout(() => {
					this.$refs.form.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.formList {
		background-color: #fff;
		margin: 10px;
		padding: 10px 10px 20px 10px;
		width: calc(100%-40px);
		height: 100%;
		border-radius: 4px;
	}
</style>
